/** @type {import('tailwindcss').Config} */
export default {
  // 使用 "class" 模式时，Tailwind 会将 "dark" 类添加到根元素（通常是 <body> 元素）上，以指示页面当前处于深色模式
  darkMode: 'class',
  // 通过配置 content，Tailwind CSS 将会检索和构建包含需要的 CSS 样式的文件，并生成最终的 CSS 输出文件
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}', './src/theme/tailwind.css'],
  theme: {
    screens: {
      xxs: '380px',
      xs: '480px',
      sm: '540px',
      md: '700px',
      lg: '992px',
      xl: '1200px',
      '2xl': '1600px',
      '3xl': '1920px',
      '4xl': '2160px',
    },
    colors: {
      grays: '#86909C',
      red: '#DB1D1D',
      black: '#000000',
      green: '#00A76F',
      blue: '#1fb6ff',
      purple: '#7e5bef',
      pink: '#ff49db',
      orange: '#ff7849',
      yellow: '#ffc82c',
      gray: '#637381',
      white: '#FFFFFF',
      WhiteSmoke: '#F5F5F5',
      Gainsboro: '#DCDCDC',
      LightGrey: '#D3D3D3',
      Silver: '#C0C0C0',
      DarkGrey: '#A9A9A9',
      DarkSlateGray: '#2F4F4F',
      DimGrey: '#696969',
      hover: '#63738114',
      bgBase: '#edeff7',
      success: '#22c55e',
      warning: '#FF9226',
      error: '#FC5151',
      info: '#00b8d9',
      primary: '#1B6DFA',
      'info-500': '#474C5F',
      'primary-100': '#2e2efe',
      'primary-200': '#0000ff',
      'primary-300': '#0101df',
      'primary-400': '#0404b4',
      'primary-500': '#08088a',
      'primary-600': '#0b0b61',
      'primary-700': '#e6f2ff',
      'primary-800': '#99ccff',
      'primary-light': '#F5F0FF',

      code: '#d63384',

      'gray-100': '#F9FAFB',
      'gray-200': '#F4F6F8',
      'gray-300': '#DFE3E8',
      'gray-400': '#C4CDD5',
      'gray-500': '#F9FAFB',
      'gray-600': '#637381',
      'gray-700': '#454F5B',
      'gray-800': '#212B36',
      'gray-900': '#161C24',

      'green-400': '#4ade80',
      'green-500': '#22c55e',
      'green-600': '#16a34a',
      'green-100': '#dcfce7',
      'green-700': '#15803d',

      'purple-50': '#faf5ff',
      'purple-100': '#f3e8ff',
      'purple-300': '#c4b5fd',
      'purple-400': '#a78bfa',
      'purple-500': '#8b5cf6',
      'purple-600': '#9333ea',
      'purple-700': '#7c3aed',

      'pink-50': '#fdf2f8',
      'pink-100': '#fce7f3',
      'pink-300': '#f9a8d4',
      'pink-400': '#f472b6',
      'pink-500': '#ec4899',
      'pink-700': '#be185d',
      'blue-50': '#eff6ff',
      'blue-400': '#60a5fa',
      'blue-500': '#3b82f6',

      'orange-300': '#fdba74', // 调试按钮边框
      'orange-400': '#fb923c',
      'orange-500': '#f97316', // 调试按钮
      'orange-600': '#ea580c', // 调试按钮悬停
      'orange-50': '#fff7ed', // 橙色背景
      'orange-100': '#ffedd5', // 橙色浅背景
      'orange-200': '#fed7aa', // 橙色边框
      'orange-700': '#c2410c',

      'indigo-50': '#eef2ff',
      'indigo-100': 'rgb(224 231 255)',
      'indigo-200': 'rgb(191 209 254)',
      'indigo-300': 'rgb(165 180 252)',

      'app-card-top': '#959EC5',
      'app-card-bottom': '#C4C8DB',
      'functional-green': '#E0EBF4',
      'functional-green-active': '#07A562',
      'functional-green-hover': '#31CD8C',
      'functional-orange': '#FFF4E8',
      'functional-orange-active': '#D97008',
      'functional-orange-hover': '#FFA64D',
      'functional-red': '#FFF1F0',
      'functional-red-active': '#CF3429',
      'functional-red-hover': '#FF706E',
      'functional-gray': '#EDEFF2',

      'input-gray': '#F2F3F5',

      red: {
        1: 'var(--red-1)',
        2: 'var(--red-2)',
        3: 'var(--red-3)',
        4: 'var(--red-4)',
        5: 'var(--red-5)',
        6: 'var(--red-6)',
        7: 'var(--red-7)',
        8: 'var(--red-8)',
        9: 'var(--red-9)',
        10: 'var(--red-10)',
      },

      volcano: {
        1: 'var(--volcano-1)',
        2: 'var(--volcano-2)',
        3: 'var(--volcano-3)',
        4: 'var(--volcano-4)',
        5: 'var(--volcano-5)',
        6: 'var(--volcano-6)',
        7: 'var(--volcano-7)',
        8: 'var(--volcano-8)',
        9: 'var(--volcano-9)',
        10: 'var(--volcano-10)',
      },

      orange: {
        1: 'var(--orange-1)',
        2: 'var(--orange-2)',
        3: 'var(--orange-3)',
        4: 'var(--orange-4)',
        5: 'var(--orange-5)',
        6: 'var(--orange-6)',
        7: 'var(--orange-7)',
        8: 'var(--orange-8)',
        9: 'var(--orange-9)',
        10: 'var(--orange-10)',
      },

      yellow: {
        1: 'var(--yellow-1)',
        2: 'var(--yellow-2)',
        3: 'var(--yellow-3)',
        4: 'var(--yellow-4)',
        5: 'var(--yellow-5)',
        6: 'var(--yellow-6)',
        7: 'var(--yellow-7)',
        8: 'var(--yellow-8)',
        9: 'var(--yellow-9)',
        10: 'var(--yellow-10)',
      },

      lime: {
        1: 'var(--lime-1)',
        2: 'var(--lime-2)',
        3: 'var(--lime-3)',
        4: 'var(--lime-4)',
        5: 'var(--lime-5)',
        6: 'var(--lime-6)',
        7: 'var(--lime-7)',
        8: 'var(--lime-8)',
        9: 'var(--lime-9)',
        10: 'var(--lime-10)',
      },

      green: {
        1: 'var(--green-1)',
        2: 'var(--green-2)',
        3: 'var(--green-3)',
        4: 'var(--green-4)',
        5: 'var(--green-5)',
        6: 'var(--green-6)',
        7: 'var(--green-7)',
        8: 'var(--green-8)',
        9: 'var(--green-9)',
        10: 'var(--green-10)',
      },

      cyan: {
        1: 'var(--cyan-1)',
        2: 'var(--cyan-2)',
        3: 'var(--cyan-3)',
        4: 'var(--cyan-4)',
        5: 'var(--cyan-5)',
        6: 'var(--cyan-6)',
        7: 'var(--cyan-7)',
        8: 'var(--cyan-8)',
        9: 'var(--cyan-9)',
        10: 'var(--cyan-10)',
      },

      blue: {
        1: 'var(--blue-1)',
        2: 'var(--blue-2)',
        3: 'var(--blue-3)',
        4: 'var(--blue-4)',
        5: 'var(--blue-5)',
        6: 'var(--blue-6)',
        7: 'var(--blue-7)',
        8: 'var(--blue-8)',
        9: 'var(--blue-9)',
        10: 'var(--blue-10)',
      },

      geekblue: {
        1: 'var(--geekblue-1)',
        2: 'var(--geekblue-2)',
        3: 'var(--geekblue-3)',
        4: 'var(--geekblue-4)',
        5: 'var(--geekblue-5)',
        6: 'var(--geekblue-6)',
        7: 'var(--geekblue-7)',
        8: 'var(--geekblue-8)',
        9: 'var(--geekblue-9)',
        10: 'var(--geekblue-10)',
      },

      purple: {
        1: 'var(--purple-1)',
        2: 'var(--purple-2)',
        3: 'var(--purple-3)',
        4: 'var(--purple-4)',
        5: 'var(--purple-5)',
        6: 'var(--purple-6)',
        7: 'var(--purple-7)',
        8: 'var(--purple-8)',
        9: 'var(--purple-9)',
        10: 'var(--purple-10)',
      },

      magenta: {
        1: 'var(--magenta-1)',
        2: 'var(--magenta-2)',
        3: 'var(--magenta-3)',
        4: 'var(--magenta-4)',
        5: 'var(--magenta-5)',
        6: 'var(--magenta-6)',
        7: 'var(--magenta-7)',
        8: 'var(--magenta-8)',
        9: 'var(--magenta-9)',
        10: 'var(--magenta-10)',
      },

      '@brand-color': {
        DEFAULT: 'var(--brand-color)',
        // gradient: 'linear-gradient(90deg, #1B6DFA 0%, #00D0FE 181.25%)',
        active: 'var(--brand-color-active)',
        hover: 'var(--brand-color-hover)',
        disabled: 'var(--brand-color-disabled)',
        light: 'var(--brand-color-light)',
        home: 'var(--brand-color-home)',
      },

      '@success-color': {
        DEFAULT: 'var(--success-color)',
        active: 'var(--success-color-active)',
        hover: 'var(--success-color-hover)',
        disabled: 'var(--success-color-disabled)',
        light: 'var(--success-color-light)',
      },

      '@warning-color': {
        DEFAULT: 'var(--warning-color)',
        active: 'var(--warning-color-active)',
        hover: 'var(--warning-color-hover)',
        disabled: 'var(--warning-color-disabled)',
        light: 'var(--warning-color-light)',
      },

      '@error-color': {
        DEFAULT: 'var(--error-color)',
        active: 'var(--error-color-active)',
        hover: 'var(--error-color-hover)',
        disabled: 'var(--error-color-disabled)',
        light: 'var(--error-color-light)',
      },

      text: {
        5: 'var(--text-5)',
        4: 'var(--text-4)',
        3: 'var(--text-3)',
        2: 'var(--text-2)',
        1: 'var(--text-1)',
      },

      fill: {
        5: 'var(--fill-5)',
        4: 'var(--fill-4)',
        3: 'var(--fill-3)',
        2: 'var(--fill-2)',
        1: 'var(--fill-1)',
        quaternary: 'var(--fill-quaternary)',
      },

      line: {
        4: 'var(--line-4)',
        3: 'var(--line-3)',
        2: 'var(--line-2)',
        1: 'var(--line-1)',
        0: 'var(--line-0)',
      },

      bg: {
        5: 'var(--bg-5)',
        4: 'var(--bg-4)',
        3: 'var(--bg-3)',
        2: 'var(--bg-2)',
        1: 'var(--bg-1)',
      },

      oth: {
        'Oth-1': 'var(--Oth-1)',
        'Oth-2': 'var(--Oth-2)',
        'Oth-35': 'var(--Oth-35)',
      },

      'workflow-node-header-blue': '#1B6DFA',
    },
    extend: {
      backgroundImage: {
        // '@brand-color-gradient': 'linear-gradient(90deg, #1B6DFA 0%, #00D0FE 181.25%)',
        '@brand-color-gradient': 'var(--brand-color-gradient)',
      },
      transitionProperty: {
        height: 'height',
      },
      animation: {
        'spin-slow': 'spin 8s linear infinite',
      },
      borderRadius: {
        default: '12px',
        small: '4px',
        middle: '16px',
        large: '100%',
        none: '0px',
      },
      margin: {
        size: {
          0: '0px',
          1: '4px',
          2: '8px',
          3: '12px',
          4: '16px',
          5: '20px',
          6: '24px',
          7: '32px',
          8: '40px',
          9: '48px',
          10: '64px',
          11: '96px',
          12: '160px',
        },
      },
      boxShadow: {
        'inc-shadow': {
          'b-1': '0px 2px 10px 0px #0000001A',
          'b-2': '0px 4px 20px 0px #0000001A',
          't-2': '0px -6px 16px 0px #00000014',
          'l-2': '-6px 0px 16px 0px #00000014',
          'r-2': '6px 0px 16px 0px #00000014',
          'b-3': '0px 8px 30px 0px #0000001A',
        },
      },
      fontSize: {
        'font-size-body-3': '14px',
        'font-size-body-1': '12px',
        'font-size-caption': '12px',
        'font-title-1': '16px',
        'font-title-2': '20px',
        'font-title-3': '24px',
        'font-size-display-1': '36px',
        'font-size-display-2': '48px',
        'font-size-display-3': '56px',
      },
      fontWeight: {
        'font-weight-400': '400',
        'font-weight-600': '600',
      },
    },
    fontSize: {
      xs: ['12px', { lineHeight: '16px' }],
      sm: ['14px', { lineHeight: '20px' }],
      base: ['16px', { lineHeight: '24px' }],
      lg: ['18px', { lineHeight: '28px' }],
      xl: ['20px', { lineHeight: '28px' }],
      '2xl': ['24px', { lineHeight: '32px' }],
      '3xl': ['30px', { lineHeight: '36px' }],
      '4xl': ['36px', { lineHeight: '40px' }],
      '5xl': ['48px', { lineHeight: '1' }],
      '6xl': ['60px', { lineHeight: '1' }],
      '7xl': ['72px', { lineHeight: '1' }],
      '8xl': ['96px', { lineHeight: '1' }],
      '9xl': ['128px', { lineHeight: '1' }],
      /** 中文样式 * */
      // #region 中文样式 start
      'cn-12': [
        '12px',
        {
          lineHeight: '20px',
          fontWeight: '400',
        },
      ],
      'cn-14': [
        '14px',
        {
          lineHeight: '22px',
          fontWeight: '400',
        },
      ],
      'cn-16': [
        '16px',
        {
          lineHeight: '24px',
          fontWeight: '400',
        },
      ],
      'cn-20': [
        '20px',
        {
          lineHeight: '28px',
          fontWeight: '400',
        },
      ],
      'cn-24': [
        '24px',
        {
          lineHeight: '32px',
          fontWeight: '400',
        },
      ],
      'cn-36': [
        '36px',
        {
          lineHeight: '44px',
          fontWeight: '400',
        },
      ],
      'cn-12-blod': [
        '12px',
        {
          lineHeight: '18px',
          fontWeight: '700',
        },
      ],
      'cn-14-blod': [
        '14px',
        {
          lineHeight: '22px',
          fontWeight: '700',
        },
      ],
      'cn-16-blod': [
        '16px',
        {
          lineHeight: '24px',
          fontWeight: '700',
        },
      ],
      'cn-20-blod': [
        '20px',
        {
          lineHeight: '28px',
          fontWeight: '700',
        },
      ],
      'cn-24-blod': [
        '24px',
        {
          lineHeight: '32px',
          fontWeight: '700',
        },
      ],
      'cn-36-blod': [
        '36px',
        {
          lineHeight: '44px',
          fontWeight: '700',
        },
      ],
      // #endregion 中文样式 end

      /** 英文样式 * */
      // #region 英文样式 start
      'en-10': [
        '10px',
        {
          lineHeight: '18px',
          fontWeight: '400',
        },
      ],
      'en-12': [
        '12px',
        {
          lineHeight: '20px',
          fontWeight: '400',
        },
      ],
      'en-14': [
        '14px',
        {
          lineHeight: '22px',
          fontWeight: '400',
        },
      ],
      'en-16': [
        '16px',
        {
          lineHeight: '24px',
          fontWeight: '400',
        },
      ],
      'en-20': [
        '20px',
        {
          lineHeight: '28px',
          fontWeight: '400',
        },
      ],
      'en-24': [
        '24px',
        {
          lineHeight: '32px',
          fontWeight: '400',
        },
      ],
      'en-36': [
        '36px',
        {
          lineHeight: '44px',
          fontWeight: '400',
        },
      ],
      'en-10-blod': [
        '10px',
        {
          lineHeight: '18px',
          fontWeight: '400',
        },
      ],
      'en-12-blod': [
        '12px',
        {
          lineHeight: '20px',
          fontWeight: '400',
        },
      ],
      'en-14-blod': [
        '14px',
        {
          lineHeight: '22px',
          fontWeight: '400',
        },
      ],
      'en-16-blod': [
        '16px',
        {
          lineHeight: '24px',
          fontWeight: '400',
        },
      ],
      'en-20-blod': [
        '20px',
        {
          lineHeight: '28px',
          fontWeight: '400',
        },
      ],
      'en-24-blod': [
        '24px',
        {
          lineHeight: '32px',
          fontWeight: '400',
        },
      ],
      'en-36-blod': [
        '36px',
        {
          lineHeight: '44px',
          fontWeight: '400',
        },
      ],
      // #endregion 英文样式 end

      /** 数字样式 * */
      // #region 数字样式 start
      'num-10': [
        '10px',
        {
          lineHeight: '10px',
          fontWeight: '350',
        },
      ],
      'num-12': [
        '12px',
        {
          lineHeight: '20px',
          fontWeight: '350',
        },
      ],
      'num-14': [
        '14px',
        {
          lineHeight: '22px',
          fontWeight: '350',
        },
      ],
      'num-16': [
        '16px',
        {
          lineHeight: '24px',
          fontWeight: '350',
        },
      ],
      'num-20': [
        '20px',
        {
          lineHeight: '28px',
          fontWeight: '350',
        },
      ],
      'num-24': [
        '24px',
        {
          lineHeight: '32px',
          fontWeight: '350',
        },
      ],
      'num-36': [
        '36px',
        {
          lineHeight: '44px',
          fontWeight: '350',
        },
      ],
      'num-10-blod': [
        '10px',
        {
          lineHeight: '10px',
          fontWeight: '400',
        },
      ],
      'num-12-blod': [
        '12px',
        {
          lineHeight: '20px',
          fontWeight: '800',
        },
      ],
      'num-14-blod': [
        '14px',
        {
          lineHeight: '22px',
          fontWeight: '800',
        },
      ],
      'num-16-blod': [
        '16px',
        {
          lineHeight: '24px',
          fontWeight: '800',
        },
      ],
      'num-20-blod': [
        '20px',
        {
          lineHeight: '28px',
          fontWeight: '800',
        },
      ],
      'num-24-blod': [
        '24px',
        {
          lineHeight: '32px',
          fontWeight: '800',
        },
      ],
      'num-36-blod': [
        '36px',
        {
          lineHeight: '44px',
          fontWeight: '800',
        },
      ],

      // #endregion 数字样式 end
    },
  },
  corePlugins: {
    // Remove the Tailwind CSS preflight styles so it can use custom base style (src/theme/base.css)
    preflight: false, // https://tailwindcss.com/docs/preflight#disabling-preflight
  },
  plugins: [],
};
